import { defineConfig, loadEnv } from 'vite'
import type { ConfigEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// Element-plus按需引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// vs code 编辑器配置
import monacoEditorPlugin from 'vite-plugin-monaco-editor'

/**
 * Persist动态分析依赖关系优化
 * Vite的依赖关系预优化很酷，可以大大改进DX。虽然Vite可以智能地检测动态依赖关系，但它是按需的，有时会使复杂项目的启动相当缓慢。
 * 正如您所知，您可以在optimizeDeps.include中显式设置依赖项，以便在服务器首次启动时对其进行优化。当你的项目变得更加复杂时，这可能会有点费力。
 * 使用vite-plugin-optimize persistent，它将在你的package.json中持久化动态依赖项的名称，这样你和你的团队下次就不需要为它们而烦恼了。 
 */
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

/**
 * vite-plugin-vue-setup-extend可以让我们在 Vue 3 + Vite 项目中更优雅地解决setup name的问题。
 * 通过使用这个插件，我们可以直接在script标签上定义name，而不需要使用两个标签或者忽略.vue后缀
 */
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd());

  return defineConfig({
    plugins: [
      vue(),
      monacoEditorPlugin({
        languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
      }),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      PkgConfig(),
      OptimizationPersist(),
      VueSetupExtend()
    ],
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'),
        'workspace': path.join(__dirname, 'src/pages/workspace')
      }
    },
    server: {
      port: 3000,
      host: '0.0.0.0',
      open: false,
      // base: "./ ", //生产环境路径
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_APP_SERVER_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  })
}
